<template>
  <div class="app-footer">
    <div class="container flex items-center justify-between">
      <div class="app-footer-logo">
        <el-space :size="15">
          <NuxtLink v-for="link in state.links" :key="link.url" :href="link.url" class="url" :title="link.title" target="_blank">
            <el-space :size="5">
              <Icon name="mdi:link-variant" size="14" />
              <span>{{ link.name }}</span>
            </el-space>
          </NuxtLink>
        </el-space>
      </div>
      <div class="nav space-x-4">
        <a href="/">首页</a>
        <NuxtLink href="/help/about">关于</NuxtLink>
        <NuxtLink :href="docsUrl" target="_blank">帮助中心</NuxtLink>
        <NuxtLink href="#" hidden>隐私</NuxtLink>
        <NuxtLink href="#" hidden>版本检测</NuxtLink>
      </div>
      <div class="copyright text-xs">
        <ClientOnly>
          <span class="domain mr-3">
            <a href="/">{{ Domain }}</a>
          </span>
        </ClientOnly>
        <span class="mr-3"><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noreferrer noopener">沪ICP备2022009358号-3</a></span>
        <span> &copy; {{ state.year }}. All rights reserved.</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Domain } from '~~/config'

const state = reactive<any>({
  // 列表
  links: [
    { name: 'react-admin.cn', title: 'react管理平台', url: 'http://react-admin.cn' },
    { name: 'ng-admin.cn', title: 'angular管理平台', url: 'http://ng-admin.cn' },
  ],
  year: new Date().getFullYear(),
})

const docsUrl = `//${Domain}/docs`
</script>
